import { Form, Input, Button, Checkbox ,Typography} from 'antd';
import {useHistory} from 'react-router-dom'
import './myform.css'
import {RootState} from "../../redux/store/store";
import {useSelector,useDispatch} from 'react-redux'
import {useEffect} from 'react'
import {getLoginUser} from "../../redux/LoginIn/slice";
const LoginForm = () => {
    const history=useHistory();
    const isloading=useSelector((state:RootState)=>state.userlogin.isloading)
    const error=useSelector((state:RootState)=>state.userlogin.error)
    const token=useSelector((state:RootState)=>state.userlogin.token)
    const temp=useSelector((state:RootState)=>state.userlogin.temp)
    const dispatch=useDispatch();
    useEffect(()=>{
        if(token){
            history.push('/home');
            return ;
        }
        if(error){
            alert('用户名或密码错误！');
        }
    },[token,error,temp])
    const onFinish = async (values: any) => {
        dispatch(getLoginUser({email:values.username,password:values.password}));
    };
    return (
        <div className="myform">
        <Typography.Title className="formtitle">旅游网登录页面</Typography.Title>
            <Form className="form"
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    >
    <Form.Item
        label="Username"
    name="username"
    rules={[{ required: true, message: 'Please input your username!' }]}
        >
        <Input />
        </Form.Item>

        <Form.Item
    label="Password"
    name="password"
    rules={[{ required: true, message: 'Please input your password!' }]}
        >
        <Input.Password />

        </Form.Item>

    <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
    <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
    <Button type="primary" htmlType="submit" loading={isloading}>
        Submit
        </Button>
        </Form.Item>
        </Form>
        </div>
);
};
export default LoginForm